<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/api_2.js"></script>
    <!-- <script src="../js/register.js"></script> -->
    <style>
        .rt {
            color: green;
            font-size: 12px;
        }

        .err {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="header">
        <ul class="header_left">
            <li><span class="iconfont icon-xingxing"></span><a href="javascript:;" class="Collection">收藏鲜花网(hua.com)</a></li>
            <li><span class="iconfont icon-weixin"></span><a href="">关注微信</a></li>
            <li><span class="iconfont icon-shoujichongzhi"></span><a href="https://www.hua.com/mobile/">花礼网app</a></li>
        </ul>
        <ul class="header_right">
            <li class="tips">
                <a href="./login.html">你好,请登录</a>
                <a href="./register.html">注册</a>
            </li>
            <li>|</li>
            <li><a href="https://www.hua.com/help/ordercx/">订单查询</a></li>
            <li>|</li>
            <li><a href="./login.html">我的花礼</a></li>
            <li>|</li>
            <li class="customer_service">
                <a href="https://www.hua.com/help/">客户服务</a>
                <div class="dropdown-menu dropdown-service">
                    <a href="https://www.hua.com/member/payment/balancefill" target="_blank">在线付款</a>
                    <a href="https://www.hua.com/help/" target="_blank">帮助中心</a>
                    <a href="https://www.hua.com/help/afterservice.htm" target="_blank">售后服务</a>
                    <a href="https://www.hua.com/help/sendRange.htm" target="_blank">配送范围</a>
                    <a href="https://www.hua.com/chat/" target="_blank">留言反馈</a>
                </div>
            </li>
            <li>|</li>
            <li class="shopping_cart">
                <a href=""><span class="iconfont icon-qicheqianlian-"></span>购物车</a>
                <div class="dropdown-menu dropdown-cart" id="CartInfo">
                    <div class="empty">您的购物车中没有商品，<a href="/">先去选购吧</a>！</div>
                </div>
            </li>
            <li>|</li>
            <li><a href="">中国领先鲜花速递服务</a></li>
        </ul>
    </div>
    <div class="logo">
        <img src="../images/logo.png" alt="">
        <p>欢迎注册</p>
        <span>已注册，前往<a href="./login.html">登录</a></span>
    </div>
    <div class="boss">
        <div class="boxLogin">
            <form onsubmit="return false">
                <p>
                    <label for="">用户名:</label>
                    <input id="user" type="text">
                    <span id="user_tips"></span>
                </p>
                <p>
                    <label for="">密&emsp;码:</label>
                    <input id="pwd" type="password">
                    <span id="pwd_tips"></span>
                </p>
                <p>
                    <label for="">手机号:</label>
                    <input id="phone" type="text">
                    <span id="phone_tips"></span>
                </p>
                <p>
                    <label for="">邮&emsp;箱:</label>
                    <input id="email" type="text">
                    <span id="email_tips"></span>
                </p>
                <p>
                    <label for="">验证码:</label>
                    <input id="code" type="text">
                    <span id="codeSpan">1111</span>
                    <span id="code_tips"></span>
                </p>
                <p><input id="btn" type="submit" disabled value="注册"></p>
            </form>
        </div>
    </div>
    <div class="footer-nav">
        <a href="https://www.hua.com/">首页</a> <b>|</b>
        <a href="https://www.hua.com/profile/about.htm" target="_blank">关于我们</a> <b>|</b>
        <a href="https://www.hua.com/profile/media.html" target="_blank">媒体报道</a> <b>|</b>
        <a href="https://www.hua.com/profile/contact.htm" target="_blank">联系方式</a> <b>|</b>
        <a href="https://www.hua.com/qiyetuangou/" target="_blank">企业团购</a> <b>|</b>
        <a href="https://www.hua.com/liansuo/" target="_blank">花店入驻</a><b>|</b>
        <a href="https://www.hua.com/profile/links.htm" target="_blank">友情链接</a> <b>|</b>
        <a href="https://www.hua.com/member/payment/balancefill" target="_blank">在线补款</a> <b>|</b>
        <a class="last-child" href="https://www.hua.com/profile/why_choose_us.htm" target="_blank">为什么选择花礼网</a>
    </div>
    <footer>
        <div>
            <img src="../images/slogan.png" height="50" width="212">
            <img src="../images/100.jpg" height="49" width="150">
            <img src="../images/bico1.jpg" alt="ICP" height="46" width="35">
            <img src="../images/govIcon.gif" title="深圳市市场监督管理局企业主体身份公示" alt="深圳市市场监督管理局企业主体身份公示" width="35" height="49"
                border="0" style="border-width:0px;border:hidden; border:none;">
        </div>
        <p>
            <a href="/profile/ChinaFlowerAssociation.htm" rel="nofollow" target="_blank" title="中国花卉协会会员">中国花卉协会会员</a>
            <a href="/profile/chinaECA.htm" rel="nofollow" target="_blank">中国电子商务协会会员</a> ICP经营许可证：<a>粤B2-20050744</a>
            <b>|</b> <a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备09171662号</a>
            <span class="ico beian"></span>粤公网安备44030502000373号 Copyright © 2005-2021
        </p>
        <p> <a href="/">www.hua.com</a><span> 深圳市百易信息技术有限公司</span> </p>
    </footer>




</body>
<script>
    var userInp = document.getElementById("user");
    var userTips = document.getElementById("user_tips");

    var pwdInp = document.getElementById("pwd");
    var pwdTips = document.getElementById("pwd_tips");


    var phoneInp = document.getElementById("phone");
    var phoneTips = document.getElementById("phone_tips");

    var emailInp = document.getElementById("email");
    var emailTips = document.getElementById("email_tips");

    var codeInp = document.getElementById("code");
    var codeTips = document.getElementById("code_tips");

    var codeSpan = document.getElementById("codeSpan");
    var btn = document.getElementById("btn");

    codeSpan.innerText = randCode();
    codeSpan.onclick = function () {
        codeSpan.innerText = randCode();
    }

    var userFlag = false;
    var pwdFlag = false;
    var phoneFlag = false;
    var emailFlag = false;
    var codeFlag = false;

     userInp.onchange = function () {
        var user = userInp.value.trim();
        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        userFlag = false;
        if (reg.test(user)) {  //格式正确  
            // 注册 -> 将注册的数据存储起来 前端 => 后端 => 数据库
            //     // data(数据) date(日期)
            //     // form(表单) from(从...来)

            isExistUser({ user }).then(function (result) {
                if (result.status) {
                    userTips.textContent = "√";
                    userTips.className = "rt";
                    userFlag = true;
                    isEnabled();
                } else {
                    userTips.textContent = "用户名已被注册";
                    userTips.className = "err";
                }
            }).catch(err => {
                throw err;
            })
        } else {
            userTips.textContent = "由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
            userTips.className = "err";
            isEnabled();
        }
    }

    pwdInp.onchange = function () {
        var pwd = pwdInp.value.trim();
        var reg = /^[\w$]{6,12}$/;
        pwdFlag = false;
        if (reg.test(pwd)) {

            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            if (/[0-9]/.test(pwd)) numFlag = true;
            if (/[a-z]/.test(pwd)) smallFlag = true;
            if (/[A-Z]/.test(pwd)) bigFlag = true;
            if (/[_$]/.test(pwd)) speFlag = true;
            var sum = numFlag + smallFlag + bigFlag + speFlag;

            pwdTips.textContent = "密码强度:" + sum;
            pwdTips.className = "rt";
            pwdFlag = true;

        } else {
            pwdTips.textContent = "由数字,大小写字母,下划线,$组成,6-12位";
            pwdTips.className = "err";
        }
        isEnabled()
    }

    phoneInp.onchange = function () {
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\d{9}$/;
        phoneFlag = false;
        if (reg.test(phone)) {
            phoneTips.textContent = "√";
            phoneTips.className = "rt";
            phoneFlag = true;
        } else {
            phoneTips.textContent = "请输入正确的手机号";
            phoneTips.className = "err";
            isEnabled();
        }
        isEnabled()
    }

    // aads123123@qq.com   
    emailInp.onchange = function () {
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.com$/;
        emailFlag = false;
        if (reg.test(email)) {
            emailTips.textContent = "√";
            emailTips.className = "rt";
            emailFlag = true;
        } else {
            emailTips.textContent = "请输入正确的邮箱";
            emailTips.className = "err";
            isEnabled();
        }
        isEnabled();
    }

    codeInp.onchange = function () {
        var code = codeInp.value.trim();
        var reg = new RegExp(`^${codeSpan.textContent}$`, "i");
        codeFlag = false;
        if (reg.test(code)) {
            codeTips.textContent = "√";
            codeTips.className = "rt";
            codeFlag = true;
        } else {
            codeTips.textContent = "×";
            codeTips.className = "err";
            isEnabled();
        }
        isEnabled()
    }



    // btn.onclick = null;
    function register() {
        // alert("注册成功");
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        // 注册 -> 将注册的数据存储起来 前端 => 后端 => 数据库
        regist({ user, pwd, phone, email }).then(function (result) {
            location.href = "./login.html";
        }).catch(err => {
            throw err;
        })
    }


    function isEnabled() {
        if (userFlag && pwdFlag && phoneFlag && emailFlag && codeFlag) {
            btn.disabled = false;
            btn.onclick = register;
        } else {
            btn.onclick = null;
            btn.disabled = true;
        }
    }
</script>

</html>